<template>
	<div class="p30">
		<div class="pb30">生命周期 及其执行顺序  总的来说，是优先执行vue3的api  setup 相当于代替了vue2 的 beforeCreate 和 created</div>
		<div class="pb30">ps： 其实就是 前面加了个on.....    不要来回进这个页面，因为我的字段是定义在 所有数据之外的</div>
		<div class="flex flex-around">
			
			<img src="@/assets/img/created.jpg" alt="">
			<div class="b-a-1 line-color-assist2 width-30 flex flex-col flex-between">
				<div class="flex flex-col flex-between flex-1 ">
					<div class="flex align-items-center flex-between">
						<div class="width-30 text-center">顺序</div>
						<div class="text-center flex-1">打印值</div>
					</div>
					<div v-for="(item,index) in mes" :key="item" class="flex flex-1 align-items-center line-color-assist2" style="border-top: 1px solid;">
						<div class="line-color-assist2 text-center width-30 height flex align-items-center flex-center" style="border-right: 1px solid; ">
							<div>{{index + 1}}</div>
						</div>
						<div class="text-center flex-1">{{item}}</div>
					</div>
				</div>

			</div>
		</div>


		
	</div>
</template>

<script>
import { onMounted,onBeforeMount } from "vue"
	let a = []
	export default{
		data(){
			return{
				mes:[]
			}
			
		},
		beforeCreate() {
			console.log('2 beforeCreate')
			a.push('2 beforeCreate')
		},
		created(){
			console.log('2 created')
			a.push('2 created')
		},
		beforeMount() {
			console.log('2 beforeMount')
			a.push('2 beforeMount')
		},
		mounted() {
			console.log('2 mounted')
			a.push('2 mounted')
			this.mes = a
			
		},
		setup() {
			console.log('3 setup')
			a.push('3 setup')
			onBeforeMount(() => {
				console.log('3 onBeforeMount')
				a.push('3 onBeforeMount')
			})
			onMounted(()=>{
				console.log('3 onMounted')
				a.push('3 onMounted')
			})
		}
	}
	

</script>

<style>
</style>